<template>
	<div>
		<el-tabs type="border-card" v-model="visual" @tab-click="clickTab">
			<el-tab-pane label="图片" name="first">
				<div class="container">
					<div class="btn_group">
						<el-button type="primary" class="handle-del mr10" @click="addFenZu(1)">新增分组</el-button>
						<el-button type="primary" class="handle-del" @click="$refs.uploadimagecom.dialogVisible = true;">图片管理</el-button>
					</div>					
					<div class="name_wrapper">
						<el-table :data="fenzu" style="width: 100%; margin-bottom: 20px" row-key="id" border :tree-props="{ children: '_child' }" @expand-change="sliderChange">
							<el-table-column label="课程名称" width="300">
								<template slot-scope="{row}">
									<div class="name">								
										<img :src="row.cover" @error="tabErrorPicture(row.id,'fenzu')" alt="" class="info-image" v-if="row._child" />
										<img :src="row.cover" @error="tabErrorChildPicture(row)" alt="" class="info-image" v-else />
										<span>{{ row.title }}</span>
									</div>
								</template>
							</el-table-column>
							<el-table-column prop="status" label="状态">
								<template slot-scope="{row}">
									<div :class="row.status > 0 ? 'on' : 'off'">{{ row.status == 0 ? '禁用' : '启用' }}</div>
								</template>
							</el-table-column>
							<el-table-column label="操作" width="340" fixed="right">
								<template slot-scope="{ row }">
									<div v-if="row._child">
										<el-button @click="addChildFenzu(row.title, row.id)" type="primary" size="mini">添加子分类</el-button>
										<el-button @click="parentFenzuEdit(row.id, row.title, row.sort, row.status,row.cover)" type="success" size="mini">编辑</el-button>
										<el-button @click="disable(row.id, row.status)" type="warning" size="mini">{{ row.status == 0 ? '启用' : '禁用' }}</el-button>
										<el-button @click="deleteRow(row.id)" type="danger" size="mini">删除</el-button>
									</div>
									<div v-else>
										<el-button @click="childFenzuEdit(row.id, row.title, row.title, row.sort, row.status,row.cover)" type="success" size="mini">编辑</el-button>
										<el-button @click="disable(row.id, row.status)" type="warning" size="mini">{{ row.status == 0 ? '启用' : '禁用' }}</el-button>
										<el-button @click="deleteRow(row.id)" type="danger" size="mini">删除</el-button>
									</div>								
								</template>
							</el-table-column>
						</el-table>
					</div>
				</div>
			</el-tab-pane>
			<el-tab-pane label="音频" name="third">
				<div class="container">
					<el-button type="primary" class="handle-del mr10" @click="addFenZu(3)">新增分组</el-button>
					<el-button type="primary" class="handle-del" @click="$refs.uploadaudiocom.dialogVisible = true;">音频管理</el-button>
					<div class="Fenzu-list-section">
						<div class="Fenzu clearfix card" v-for="(item, index) in fenzu" :key="index">
							<div class="parent-item clearfix">
								<div class="tac">
									<div class="title">
										<div class="cover">
											<img :src="item.cover" width="30" height="30" />
										</div>
										<div class="info type-parent">{{ item.title }}</div>
									</div>
									<div class="status"><span
											:class="item.status==0?'llabel label-warn':'label label-info'">{{
											item.status == 0 ? '禁用' : '启用' }}</span></div>
									<div class="action">
										<el-row>
											<el-button @click="addChildFenzu(item.title, item.id)" type="primary"
												size="mini">添加子分组</el-button>
											<el-button
												@click="parentFenzuEdit(item.id, item.title, item.sort, item.status,item.cover)"
												type="success" size="mini">编辑</el-button>
											<el-button @click="disable(item.id, item.status)" type="warning"
												size="mini">
												{{ item.status == 0 ? '启用' : '禁用' }}</el-button>
											<el-button @click="deleteRow(item.id)" type="danger" size="mini">删除
											</el-button>
										</el-row>
									</div>
								</div>
							</div>
							<div class="child-item clearfix" v-for="(sonItem, index) in item._child" :key="index">
								<div class="tac">
									<div class="title">
										<div class="cover">
											<img :src="sonItem.cover" width="30" height="30" />
										</div>
										<div class="info type-parent">{{ sonItem.title }}</div>
									</div>
									<div class="status"><span
											:class="sonItem.status==0?'llabel label-warn':'label label-info'">{{
											sonItem.status == 0 ? '禁用' : '启用' }}</span></div>
									<div class="action">
										<el-row>
											<el-button
												@click="childFenzuEdit(sonItem.id, item.title, sonItem.title, sonItem.sort, sonItem.status,sonItem.cover)"
												type="success" size="mini">编辑</el-button>
											<el-button @click="disable(sonItem.id, sonItem.status)" type="warning"
												size="mini">
												{{ sonItem.status == 0 ? '启用' : '禁用' }}</el-button>
											<el-button @click="deleteRow(sonItem.id)" type="danger" size="mini">删除
											</el-button>
										</el-row>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</el-tab-pane>
			<el-tab-pane label="视频" name="second">
				<div class="container">
					<el-button type="primary" class="handle-del mr10" @click="addFenZu(2)">新增分组</el-button>
					<el-button type="primary" class="handle-del" @click="$refs.uploadvideocom.dialogVisible = true;">视频管理</el-button>
					<div class="Fenzu-list-section">
						<div class="Fenzu clearfix card" v-for="(item, index) in fenzu" :key="index">
							<div class="parent-item clearfix">
								<div class="tac">
									<div class="title">
										<div class="cover">
											<img :src="item.cover" width="30" height="30" />
										</div>
										<div class="info type-parent">{{ item.title }}</div>
									</div>
									<div class="status"><span
											:class="item.status==0?'llabel label-warn':'label label-info'">{{
											item.status == 0 ? '禁用' : '启用' }}</span></div>
									<div class="action">
										<el-row>
											<el-button @click="addChildFenzu(item.title, item.id)" type="primary"
												size="mini">添加子分组</el-button>
											<el-button
												@click="parentFenzuEdit(item.id, item.title, item.sort, item.status,item.cover)"
												type="success" size="mini">编辑</el-button>
											<el-button @click="disable(item.id, item.status)" type="warning"
												size="mini">
												{{ item.status == 0 ? '启用' : '禁用' }}</el-button>
											<el-button @click="deleteRow(item.id)" type="danger" size="mini">删除
											</el-button>
										</el-row>
									</div>
								</div>
							</div>
							<div class="child-item clearfix" v-for="(sonItem, index) in item._child" :key="index">
								<div class="tac">
									<div class="title">
										<div class="cover">
											<img :src="sonItem.cover" width="30" height="30" />
										</div>
										<div class="info type-parent">{{ sonItem.title }}</div>
									</div>
									<div class="status"><span
											:class="sonItem.status==0?'llabel label-warn':'label label-info'">{{
											sonItem.status == 0 ? '禁用' : '启用' }}</span></div>
									<div class="action">
										<el-row>
											<el-button
												@click="childFenzuEdit(sonItem.id, item.title, sonItem.title, sonItem.sort, sonItem.status,sonItem.cover)"
												type="success" size="mini">编辑</el-button>
											<el-button @click="disable(sonItem.id, sonItem.status)" type="warning"
												size="mini">
												{{ sonItem.status == 0 ? '启用' : '禁用' }}</el-button>
											<el-button @click="deleteRow(sonItem.id)" type="danger" size="mini">删除
											</el-button>
										</el-row>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</el-tab-pane>
			<el-tab-pane label="文件" name="fourth">
				<div class="container">
					<el-button type="primary" class="handle-del mr10" @click="addFenZu(4)">新增分组</el-button>
					<el-button type="primary" class="handle-del" @click="$refs.uploadfilescom.dialogVisible = true;">文件管理</el-button>
					<div class="Fenzu-list-section">
						<div class="Fenzu clearfix card" v-for="(item, index) in fenzu" :key="index">
							<div class="parent-item clearfix">
								<div class="tac">
									<div class="title">
										<div class="cover">
											<img :src="item.cover" width="30" height="30" />
										</div>
										<div class="info type-parent">{{ item.title }}</div>
									</div>
									<div class="status"><span
											:class="item.status==0?'llabel label-warn':'label label-info'">{{
											item.status == 0 ? '禁用' : '启用' }}</span></div>
									<div class="action">
										<el-row>
											<el-button @click="addChildFenzu(item.title, item.id)" type="primary"
												size="mini">添加子分组</el-button>
											<el-button
												@click="parentFenzuEdit(item.id, item.title, item.sort, item.status,item.cover)"
												type="success" size="mini">编辑</el-button>
											<el-button @click="disable(item.id, item.status)" type="warning"
												size="mini">
												{{ item.status == 0 ? '启用' : '禁用' }}</el-button>
											<el-button @click="deleteRow(item.id)" type="danger" size="mini">删除
											</el-button>
										</el-row>
									</div>
								</div>
							</div>

							<div class="child-item clearfix" v-for="(sonItem, index) in item._child" :key="index">
								<div class="tac">
									<div class="title">
										<div class="cover">
											<img :src="sonItem.cover" width="30" height="30" />
										</div>
										<div class="info type-parent">{{ sonItem.title }}</div>
									</div>
									<div class="status"><span
											:class="sonItem.status==0?'llabel label-warn':'label label-info'">{{
											sonItem.status == 0 ? '禁用' : '启用' }}</span></div>
									<div class="action">
										<el-row>
											<el-button
												@click="childFenzuEdit(sonItem.id, item.title, sonItem.title, sonItem.sort, sonItem.status,sonItem.cover)"
												type="success" size="mini">编辑</el-button>
											<el-button @click="disable(sonItem.id, sonItem.status)" type="warning"
												size="mini">
												{{ sonItem.status == 0 ? '启用' : '禁用' }}</el-button>
											<el-button @click="deleteRow(sonItem.id)" type="danger" size="mini">删除
											</el-button>
										</el-row>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
		    </el-tab-pane>
			<el-tab-pane label="管理" name="fiveth">
                  <el-button type="primary" @click="$refs.uploadmorefilescom.dialogVisible = true;">打开管理文件</el-button>
			</el-tab-pane>
		</el-tabs>
		<!-- 新增/编辑弹出框 -->
		<el-dialog :title="dialogTitle" :visible.sync="addOrEditVisible" width="50%" class="sorticon">
			<el-form ref="form" :rules="rules" :model="form" label-width="100px">
				<el-form-item label="上级分组" v-if="form.showParentName">
					<el-input v-model="form.parentName" :disabled="form.orEdit"></el-input>
				</el-form-item>
				<el-form-item label="分组名称" prop="name">
					<el-input v-model="form.name"></el-input>
				</el-form-item>
				<el-form-item label="分组图片">
					<div class="avatar-uploader" @click="updateuploadimg">
						<img v-if="form.cover" :src="form.cover" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</div>
					<el-tag>建议尺寸：300*300px，等比例正方形图片，支持jpg、png格式。</el-tag>
				</el-form-item>
				<el-form-item label="排序" prop="sort">
					<el-input v-model.number="form.sort" placeholder="数字越小越靠前" type="number"></el-input>
				</el-form-item>
				<el-form-item label="状态">
					<el-radio-group v-model="form.status">
						<el-radio :label="1" :key="1">启用</el-radio>
						<el-radio :label="0" :key="0">禁用</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="cancel">取 消</el-button>
				<el-button type="primary" @click="save('form')">确 定</el-button>
			</span>
		</el-dialog>
		<uploadimage ref="uploadimagecom" v-on:childByImageValue="childByImageValue"></uploadimage>
		<uploadaudio ref="uploadaudiocom"></uploadaudio>
		<uploadvideo ref="uploadvideocom"></uploadvideo>
		<uploadfiles ref="uploadfilescom"></uploadfiles>
		<uploadmorefiles ref="uploadmorefilescom"></uploadmorefiles>
	</div>
</template>

<script>
import {
	fenZuData,
	addFenZuData,
	editFenZuData,
	delFenZuData
} from '../../api/index';
import uploadimage from '@/components/common/uploadimage.vue';
import uploadaudio from '@/components/common/uploadaudio.vue';
import uploadvideo from '@/components/common/uploadvideo.vue';
import uploadfiles from '@/components/common/uploadfiles.vue';
import uploadmorefiles from '@/components/common/uploadmorefiles.vue';
export default {
	components: {
		uploadimage,
		uploadaudio,
		uploadvideo,
		uploadfiles,
		uploadmorefiles
	},
	data() {
		return {
			fenzu: [],
			addOrEditVisible: false,
			id: '',
			dialogTitle: '',
			form: {
				showParentName: false,
				parentName: '',
				orEdit: true,
				name: '',
				sort: 0,
				status: 1,
				cover: ''
			},
			istatus: 1,
			rules: {
				name: [
					{ required: true, message: '请输入分组名称', trigger: 'blur' },
					{ min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
				],
				sort: [
					{ required: true, message: '请输入排序数字', trigger: 'blur' },
					{ type: 'number', message: '必须为数字' }
				]
			},
			typeid: 1,
			visual: 'first',
			errorProduct: require('@/assets/img/noProduct.jpg'), 
		};
	},
	created() {
		this.typeid = localStorage.getItem('typeid') ? localStorage.getItem('typeid') : 1;
		this.visual = localStorage.getItem('visual') ? localStorage.getItem('visual') : 'first';
		this.getData(this.typeid);
	},
	methods: {
		tabErrorPicture(id,data){    // 表格图文封面默认展示图
            let i = this[data].findIndex(v => v.id == id);
			this[data][i].cover = this.errorProduct;
        },
		tabErrorChildPicture(v){    // 表格图文封面子级默认展示图
			v.cover = this.errorProduct;
		},
		sliderChange(row,bool){	// 表格展开、收起
			let i = this.fenzu.findIndex(v => v.id == row.id);
			bool && this.fenzu[i]._child.forEach(v => this.tabErrorChildPicture(v));
		},
		clickTab(tab) {
			if (tab.label == "图片") {
				this.typeid = 1;
				this.visual = 'first';
				this.getData(1);
			}
			if (tab.label == "视频") {
				this.typeid = 2;
				this.visual = 'second';
				this.getData(2);
			}
			if (tab.label == "音频") {
				this.typeid = 3;
				this.visual = 'third';
				this.getData(3);
			}
			if (tab.label == "文件") {
				this.typeid = 4;
				this.visual = 'fourth';
				this.getData(4);
			}
			localStorage.setItem('typeid', this.typeid);
			localStorage.setItem('visual', this.visual);
		},
		getData(typeid) {
			fenZuData({ typeid }).then((res) => {
				this.fenzu = res.data.list;				
			});
		},
		addFenZu(typeid) {
			this.addOrEditVisible = true;
			this.form = {
				name: '',
				cover: '',
				sort: 0,
				status: 1
			};
			this.id = 0;
			this.dialogTitle = '新增';
			this.typeid = typeid;
			//console.log(this.form);
		},
		parentFenzuEdit(id, title, sort, status, cover) {
			this.addOrEditVisible = true;
			this.form.showParentName = false;
			this.id = id;
			this.form.name = title;
			this.form.sort = sort;
			this.form.status = status;
			this.form.orEdit = false;
			this.form.cover = cover;
			this.dialogTitle = '编辑';
		},
		childFenzuEdit(id, Ptitle, Stitle, sort, status, cover) {
			this.addOrEditVisible = true;
			this.form.showParentName = true;
			this.id = id;
			this.form.parentName = Ptitle;
			this.form.name = Stitle;
			this.form.sort = sort;
			this.form.status = status;
			this.form.orEdit = true;
			this.form.cover = cover;
			this.dialogTitle = '编辑';
		},
		addChildFenzu(title, id, index) {
			this.form = {
				name: '',
				cover: '',
				sort: 0,
				status: 1
			};
			this.addOrEditVisible = true;
			this.form.showParentName = true;
			this.form.parentName = title;
			this.id = id;
			this.form.orEdit = true;
			this.dialogTitle = '新增';
		},
		//禁用
		disable(id, status) {
			this.$confirm(`确定${status == 0 ? '启用' : '禁用'}吗！`, '提示', {
				type: 'warning'
			}).then(() => {
				editFenZuData({
					id: id,
					status: status == 0 ? 1 : 0
				}).then((res) => {
					if (res.code == 1) {
						this.$message.success('成功');
						this.typeid = localStorage.getItem('typeid') ? localStorage.getItem('typeid') : 1;
		                this.visual = localStorage.getItem('visual') ? localStorage.getItem('visual') : 'first';
		                this.getData(this.typeid);
						//location.reload();
					}
				});
			});
		},
		//删除
		deleteRow(id) {
			// 二次确认删除
			this.$confirm('确定要删除吗？', '提示', {
				type: 'warning'
			}).then(() => {
				delFenZuData({
					id: id
				}).then((res) => {
					if (res.code == 1) {
						this.$message.success('删除成功');
						this.typeid = localStorage.getItem('typeid') ? localStorage.getItem('typeid') : 1;
		                this.visual = localStorage.getItem('visual') ? localStorage.getItem('visual') : 'first';
		                this.getData(this.typeid);
						//location.reload();
					}
				});
			});
		},
		cancel() {
			this.addOrEditVisible = false;
		},
		save(formName) {
			if (this.dialogTitle == '新增') {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						addFenZuData({
							pid: this.id,
							title: this.form.name,
							sort: this.form.sort,
							status: this.form.status,
							cover: this.form.cover,
							typeid: this.typeid
						}).then((res) => {
							console.log(res);
							if (res.code == 1) {
								this.addOrEditVisible = false;
								this.typeid = localStorage.getItem('typeid') ? localStorage.getItem('typeid') : 1;
		                        this.visual = localStorage.getItem('visual') ? localStorage.getItem('visual') : 'first';
		                        this.getData(this.typeid);
								//location.reload();
							}
						});
					} else {
						return false
					}
				})

			} else {
				editFenZuData({
					id: this.id,
					title: this.form.name,
					sort: this.form.sort,
					status: this.form.status,
					cover: this.form.cover
				}).then((res) => {
					if (res.code == 1) {
						this.addOrEditVisible = false;
						this.typeid = localStorage.getItem('typeid') ? localStorage.getItem('typeid') : 1;
		                this.visual = localStorage.getItem('visual') ? localStorage.getItem('visual') : 'first';
		                this.getData(this.typeid);
						//location.reload();
					}
				});
			}
		}, childByImageValue: function (childValue) {
			this.form.cover = childValue;
		}, updateuploadimg() { //显示上传组件
			this.$refs.uploadimagecom.dialogVisible = true;//显示上传对话框
		}
	}
};
</script>

<style lang="scss" scoped>
@import '~@/components/common/css/common.css';
.container{
	.btn_group{
		margin: 0 0 15px;
	}
	.name_wrapper{
		.el-table{	
			::v-deep .cell{
				display: flex;
				.name{
					display: flex;
					align-items: center;				
					img{
						width: 30px;
						height: 30px;
						margin: 0 10px 0 0;
					}
				}
				.on{
					color: #67C23A;
				}
				.off{
					color: #F56C6C;
				}
			}	
			
		}
	}
}



.Fenzu-list-section {
	margin-top: 20px;
}

.Fenzu-list-section .Fenzu {
	padding: 10px;
}

.card {
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
	background-color: #fff;
	border-radius: 5px;
	border: none;
	margin-bottom: 30px;
}

.Fenzu-list-section .child-item,
.Fenzu-list-section .parent-item {
	border-left: 1px #ccc dashed;
	border-right: 1px #ccc dashed;
	border-bottom: 1px #ccc dashed;
	padding: 26px 30px;
}

.Fenzu-list-section .parent-item {
	border-top: 1px #ccc dashed;
	margin: 10px 10px 0;
}

.tac {
	margin: -16px;
}

.Fenzu-list-section .title {
	float: left;
	width: 400px;
	line-height: 32px;
}

.Fenzu-list-section .child-item .title {
	width: 358px;
}

.Fenzu-list-section .title .cover {
	float: left;
	width: 32px;
}

.Fenzu-list-section .title .info {
	margin-left: 42px;
}

.Fenzu-list-section .status {
	width: 90px;
	float: left;
	line-height: 32px;
}

.bg-aqua,
.callout.callout-info,
.alert-info,
.label-info,
.modal-info .modal-body {
	background-color: #00c0ef !important;
	color: #fff !important;
}

.label-warn {
	background-color: red !important;
	color: #fff !important;
}

.Fenzu-list-section .action {
	float: right;
	line-height: 32px;
}

.Fenzu-list-section .child-item {
	margin: 0 10px 0 52px;
}

.sorticon {
	.avatar-uploader {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		width: 100px !important;
		height: 100px !important;
		text-align: center;
	}

	.avatar-uploader:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 50px;
		height: 50px;
		line-height: 100px;
	}

	.avatar {
		width: 100px;
		height: 100px;
		display: block;
	}

	.el-input__inner {
		width: 200px !important;
	}
}
</style>
